<template>
  <div>
    <a-row type="flex" justify="space-between" :gutter="8">
      <a-col>
        <a-form-model layout="inline" :model="form" labelAlign="left">
          <a-form-model-item>
            <a-input-group compact>
              <a-select v-model="form.keyword_type" style="width: 100px">
                <a-select-option :value="0">智能搜索</a-select-option>
                <a-select-option :value="1">红娘坐席</a-select-option>
                <a-select-option :value="2">用户号码</a-select-option>
              </a-select>
              <a-input v-model="form.keyword" placeholder="请输入手机号码或分机号" style="width: 200px" allowClear @pressEnter="$refs.table.refresh(true)" />
            </a-input-group>
          </a-form-model-item>
          <a-form-model-item>
            <matcherSel v-model="form.worker_id" width="160" placeholder="呼出红娘" @change="$refs.table.refresh(true)" allowClear></matcherSel>
          </a-form-model-item>
          <a-form-model-item>
            <a-select v-model="form.status" style="width: 120px" placeholder="接通状态" allowClear @change="$refs.table.refresh(true)">
              <a-select-option :value="0">未接通</a-select-option>
              <a-select-option :value="1">接通成功</a-select-option>
              <a-select-option :value="2">接通中</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item>
            <a-range-picker :ranges="dateRangePickerOpt()" v-model="form.rangeTime" format="YYYY-MM-DD HH:mm" />
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" @click="$refs.table.refresh(true)">搜索</a-button>
          </a-form-model-item>
        </a-form-model>
      </a-col>
      <!-- <a-col>
          <a-button type="primary"></a-button>
        </a-col> -->
    </a-row>
    <br />
    <div class="blind_table">
      <s-table ref="table" size="default" bordered rowKey="id" :columns="columns" :data="loadData" :alert="false" :pagenation="pagenation" showPagination="auto">
        <div slot="worker" slot-scope="row">
          <div style="margin-bottom: 10px;">
            <span>{{ row?.worker?.name }}</span>
            <span style="color: #B8C2D2;" v-if="row?.store_name">（{{ row?.store_name }}）</span>
          </div>
          <span>{{ row.from_phone }}</span>
        </div>
        <div slot="user" slot-scope="row">
          <div style="margin-bottom: 10px;">
            <span style="color: #7246CB;cursor: pointer;" @click="$router.push({ path: '/customer/detail', query: { id: row.targetCustomer.id } })">
              {{ row?.targetCustomer?.detail?.real_name === '' ? row?.targetCustomer?.nickname : row?.targetCustomer?.detail?.real_name }}
            </span>
            <span v-if="row?.targetCustomer?.number" style="font-size: 14px;color: #B8C2D2;margin-left: 5px;">编号：{{ row.targetCustomer.number }}</span>
          </div>
          <span>{{ row.to_phone }}</span>
          <span style="color: #B8C2D2;margin-left: 5px;" v-if="row?.targetCustomer?.detail?.phone_location != ''">（{{ row?.targetCustomer?.detail?.phone_location }}）</span>
        </div>
        <div slot="callInfo" slot-scope="row">
          <div style="margin-bottom: 10px;">
            <span style="color: #F56C6C;" v-if="row.status == 0">未接通</span>
            <span style="color: #67C23A;" v-if="row.status == 1">接通成功</span>
            <span style="color: #B8C2D2;" v-if="row.status == 2">接通中</span>
          </div>
          <a-tooltip style="margin-top: 10px;" placement="top" v-if="row.status == 1 && row.audio">
            <template slot="title">
              <span>播放录音</span>
            </template>
            <div style="display: flex;align-items: center;color: #747474;" @click.stop="$audio.play(row?.audio?.url, row?.id)">
              <span>通话时长：{{ formatTime(row?.audio?.property?.duration) }}</span>
              <a-icon style="color: #747474;font-size: 16px;margin-left: 5px;" type="play-circle" />
            </div>
          </a-tooltip>
        </div>
        <div slot="sendInfo" slot-scope="row">
          <div style="margin-bottom: 10px;">{{ row.created_at }}</div>
          <span>
            第
            <span style="color: red;">{{ row.call_times }}</span>
            次拨打
          </span>
        </div>
        <div slot="content" slot-scope="row">
          {{ row?.follow?.content }}
        </div>
      </s-table>
    </div>
  </div>
</template>
<script>
import { STable } from '@/components'
import { requestFilterCode } from '@/utils/request'
import { phoneRecord } from '@/api/blind/systemConfig/index.js'
import matcherSel from '@/views/blind/components/matcherSel/index.vue'
import { formatTime, dateRangePickerOpt } from '@/utils/util.js'
export default {
  name: '',
  components: {
    STable,
    matcherSel
  },
  computed: {},
  data() {
    return {
      dateRangePickerOpt,
      form: {
        keyword_type: 0,
        keyword: '',
        status: undefined,
        worker_id: '',
        rangeTime: []
      },
      columns: [
        {
          title: '呼出红娘/坐席',
          scopedSlots: { customRender: 'worker' },
          width: 280
        },
        {
          title: '呼入用户/电话号码',
          scopedSlots: { customRender: 'user' },
          width: 320
        },
        {
          title: '接通状态/通话时长',
          scopedSlots: { customRender: 'callInfo' },
          width: 250
        },
        {
          title: '拨打时间/拨打次数',
          scopedSlots: { customRender: 'sendInfo' },
          width: 250
        },
        {
          title: '客户状态/小记内容',
          scopedSlots: { customRender: 'content' }
        }
      ],
      pagenation: {
        page: 1,
        pagesize: 10
      },
      loading: false,
      loadData: async (parameter) => {
        this.loading = true
        const { keyword, rangeTime, keyword_type, status, worker_id } = this.form
        const { pageNo: page, pageSize: pagesize } = parameter
        let [start_time = '', end_time = ''] = rangeTime
        start_time = formatTime(start_time, 'toStr')
        end_time = formatTime(end_time, 'toStr')
        const res = await requestFilterCode(
          await phoneRecord({
            page,
            per_page: pagesize,
            keyword,
            keyword_type,
            status,
            worker_id,
            start_time,
            end_time
          })
        )
        this.loading = false
        const { meta, data } = res
        const { current_page, per_page, total } = meta
        this.pagenation = {
          page: current_page,
          pagesize: per_page
        }
        return {
          data: data,
          pageSize: per_page,
          pageNo: current_page,
          totalPage: Math.round(total / per_page),
          totalCount: total
        }
      }
    }
  },
  activated() {
    if (!this.loading) {
      this.$refs.table.loadData()
    }
  },
  mounted() {},
  methods: {
    formatTime(seconds) {
      var minutes = Math.floor(seconds / 60)
      var remainingSeconds = seconds % 60
      var formattedMinutes = minutes < 10 ? '0' + minutes : minutes
      var formattedSeconds = remainingSeconds < 10 ? '0' + remainingSeconds : remainingSeconds
      return formattedMinutes + ':' + formattedSeconds
    }
  }
}
</script>

<style lang="less" scoped></style>
